<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { NButton, NForm, NFormItem, NInput, NIcon, NCard, useMessage } from 'naive-ui'
import { UserOutlined, LockOutlined } from '@vicons/antd'
import md5 from 'js-md5'
import http from '../http'

// 路由
const router = useRouter()

// 用户信息
const userInfo = reactive({
  uid: '',
  password: '',
  role: ''
})

// 表单
const formRef = ref(null)

// 校验规则
const rules = {
  uid: { required: true, trigger: 'blur', message: '请输入用户' },
  password: { required: true, trigger: 'blur', message: '请输入密码' }
}

// 消息
const message = useMessage()

// 对密码进行MD5加密
function getPassword(password, username) {
  if (username === undefined || username === null) {
    const uid = sessionStorage.getItem('uid')
    return md5(uid + '-' + password)
  }
  return md5(username + '-' + password)
}

// 登录
function login(e) {
  e.preventDefault()
  formRef.value.validate(err => {
    if (!err) {
      // 对密码进行MD5加密
      const passwd = getPassword(userInfo.password, userInfo.uid)
      http.post('/api/login', { uid: userInfo.uid, password: passwd }).then(res => {
        if (res.data.status) {
          // 保存会话数据
          sessionStorage.setItem('uid', userInfo.uid)
          sessionStorage.setItem('name', res.data.name)
          sessionStorage.setItem("token", res.data.token)
          sessionStorage.setItem("role", res.data.role)
          // 转主页
          router.push({ name: 'home' })
          message.success('登录成功')
        } else {
          console.log(`Login.login => 用户登录失败:${res.data.message}`)
          message.error(res.data.message)
        }
      }).catch(err => {
        console.warn(`Login.login => 用户登录错误:${err.message}`)
        message.error(err.message)
      })
    } else {
      // 字段校验失败
      for (let row of err) {
        console.log(`Login.login => 登录校验失败：${row[0].message}`)
      }
    }
  })
}
</script>

<template>
  <n-card title="大屏数据系统" class="login" :header-style="{ 'text-align': 'center', 'font-size': '30px' }">
    <n-form :rules="rules" :label-width="55" :model="userInfo" ref="formRef" label-placement="left">
      <n-form-item label="用户" path="uid">
        <n-input @keydown.enter="login" placeholder="请输入用户" v-model:value="userInfo.uid">
          <template #prefix>
            <n-icon>
              <UserOutlined />
            </n-icon>
          </template>
        </n-input>
      </n-form-item>
      <n-form-item label="密码" path="password">
        <n-input type="password" @keydown.enter="login" show-password-on="mousedown" placeholder="请输入密码"
          v-model:value="userInfo.password">
          <template #prefix>
            <n-icon>
              <LockOutlined />
            </n-icon>
          </template>
        </n-input>
      </n-form-item>
      <n-form-item label=" "><n-button block type="primary" @click="login">登录</n-button></n-form-item>
    </n-form>
  </n-card>
</template>

<style scoped>
.login {
  margin: 0;
  position: absolute;
  background-color: #eee;
  top: 50%;
  left: 50%;
  width: 320px;
  transform: translate(-50%, -50%);
  border-radius: 20px;
  box-shadow: 5px 5px 5px 5px #cccccc;
}

.login:hover {
  box-shadow: none;
}
</style>
